window.onload = function() {
    getBannerList(); //轮播图列表
    msApi(); //秒杀专区
    hotSaleApi(); //热卖专区
    guessLikeApi(); //推荐喜欢
    // ajax("get", "/JS/JSON.json", function(res) {
    //     console.log(res);
    // }, true);


    // 搜索框
    var searchInput = document.getElementById("searchInput");
    searchInput.addEventListener("keyup", debounce(getSuggest, 500), false);
    searchInput.addEventListener("blur", hideKeyword, false);
    searchInput.addEventListener("focus", showKeyword, false);

    function showKeyword() {
        // getSuggest();
        if (searchInput.value !== "") {
            document.getElementById("search-suggest").style.display = "block";
        }
    }

    function hideKeyword() {
        document.getElementById("search-suggest").style.display = "none";
    }

    // 获取提示列表JS
    function getSuggest() {
        ajax("get", "/JS/suggest.json", function(res) {
            if (res.code == 0) {
                var suggest_list = document.getElementById("search-suggest");
                var data = res.data;
                // console.log(data);
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str += "<li>" + data[i].suggestname + "</li>"
                }
                suggest_list.innerHTML = str;
                // console.log(str);
                showKeyword();
            }
        }, true);
    }

    // 防抖函数
    function debounce(fn, delay) {
        var handle;
        return function() {
            clearTimeout(handle);
            handle = setTimeout(function() {
                fn();
            }, delay);
        }
    }


    // 轮播图操作
    // bannerOption()

    function bannerOption() {
        var swiper = document.getElementById("swiper"); //获取轮播图包裹层元素
        var swiperItem = swiper.getElementsByClassName("swiper-item"); //获取轮播图列表
        var prev = document.getElementsByClassName("prev")[0]; //获取上一张按钮
        var next = document.getElementsByClassName("next")[0]; //获取下一张按钮
        var indicators = document.getElementsByClassName("indicator"); //获取圆点列表
        var index = 0; //当前轮播图索引，默认第一张
        var time = null; //定时器

        //设置轮播图透明度和位移
        for (var i = 0; i < swiperItem.length; i++) {
            if (index == i) {
                swiperItem[i].style.opacity = 1;
            } else {
                swiperItem[i].style.opacity = 0;
            }
            swiperItem[i].style.transform = "translateX(" + (-i * swiperItem[0].offsetWidth) + "px)";
        }

        //给圆点添加点击事件
        for (var k = 0; k < indicators.length; k++) {
            indicators[k].onclick = function() {
                clearInterval(timer); //清除定时器
                var clickIndex = parseInt(this.getAttribute("data-index"));
                index = clickIndex;
                changeImg();
            }
        }

        prev.onclick = function() {
            clearInterval(timer); //清除定时器
            index--;
            changeImg();
        }
        next.onclick = function() {
            clearInterval(timer); //清除定时器
            index++;
            changeImg();
        }

        swiper.addEventListener("mouseover", function() {
            clearInterval(timer) //清除定时器
        }, false);

        swiper.addEventListener("mouseout", function() {
            autoChange();
        }, false);

        //更换图片
        function changeImg() {
            if (index < 0) {
                index = swiperItem.length - 1;
            } else if (index > swiperItem.length - 1) {
                index = 0;
            }
            for (var j = 0; j < swiperItem.length; j++) {
                swiperItem[j].style.opacity = 0;
            }
            swiperItem[index].style.opacity = 1;
            setIndicatorOn();
        }

        //设置圆点激活状态
        function setIndicatorOn() {
            for (var i = 0; i < indicators.length; i++) {
                indicators[i].classList.remove("on");
            }
            indicators[index].classList.add("on");
        }

        // 自动更换图片
        autoChange()

        function autoChange() {
            timer = setInterval(function() {
                index++;
                changeImg();
            }, 3000);
        }
    }

    //获取轮播图列表JS
    function getBannerList() {
        ajax("get", "/JS/swiper.json", function(res) {
            // console.log(res);
            if (res.code == 0) {
                var data = res.data;
                // 轮播图列表循环，动态加入容器
                var swiper = document.getElementById("swiper");
                var str = " ";
                for (var i = 0; i < data.length; i++) {
                    str += '<li class="swiper-item"><a href="#"><img src="' + data[i].banner_img + '" alt=""></a></li>';
                }
                swiper.innerHTML = str;
                //原点列表循环，动态加入容器
                var indicators = document.getElementById("indicators");
                var str2 = " ";
                for (var i = 0; i < data.length; i++) {
                    if (i == 0) {
                        str2 += '<div class="on indicator" data-index="' + i + '"></div>';
                    } else {
                        str2 += '<div class="indicator" data-index="' + i + '"></div>';
                    }
                };
                indicators.innerHTML = str2;
                bannerOption();
            }
        }, true);
    }

    // 获取秒杀专区数据
    function msApi() {
        ajax("get", "/JS/miaosha.json", function(res) {
            // console.log(res);
            if (res.code == 0) {
                var cd_time = res.data.ms_time;
                var good_list = res.data.goods_list;
                countDown(cd_time);
                var miaoshaList = document.getElementById("miaoshaList");
                var str = " ";
                for (var i = 0; i < good_list.length; i++) {
                    str += '<div class="ms-item">' +
                        '<a href="#" class="ms-item-link">' +
                        '<img src="' + good_list[i].good_img + '" alt="商品" class="ms-item-img">' +
                        '<p class="ms-item-name">' + good_list[i].name + '</p>' +
                        '<div class="ms-item-buy">' +
                        '<span class="progress"><span class="progress-bar1" style="width:' + good_list[i].progress + '%"></span></span>' +
                        '<span class="buy-num">已抢购' + good_list[i].progress + '%</span>' +
                        '</div>' +
                        '<div class="ms-item-price clearfix">' +
                        '<span class="cm-price new-price">￥' + good_list[i].new_price + '</span>' +
                        ' <span class="cm-price origin-price">￥' + good_list[i].origin_price + '</span>' +
                        '</div>' +
                        '</a>' +
                        '</div>';
                }
                miaoshaList.innerHTML = str;
            }
        }, true);
    }

    // 秒杀专区倒计时
    function countDown(t) {
        var ms_time = t;
        var ms_timer = setInterval(function() {
            if (ms_time < 0) {
                clearInterval(ms_timer);
            } else {
                calTime(ms_time);
                ms_time--;
            }
        }, 1000);
    }

    function calTime(time) {
        var hour = Math.floor(time / 60 / 60); //小时计算
        var minutes = Math.floor(time / 60 % 60); //分钟计算
        var seconds = Math.floor(time % 60); //秒钟计算
        hour = formatTime(hour);
        minutes = formatTime(minutes);
        seconds = formatTime(seconds);
        document.getElementsByClassName("cd_hour")[0].innerHTML = hour;
        document.getElementsByClassName("cd_min")[0].innerHTML = minutes;
        document.getElementsByClassName("cd_sec")[0].innerHTML = seconds;
    }

    function formatTime(t) {
        if (t < 10) {
            t = "0" + t;
        }
        return t;
    }

    // 获取热卖单品列表
    function hotSaleApi() {
        ajax("get", "/JS/hotsale.json", function(res) {
            // console.log(res);
            if (res.code == 0) {
                var list = res.data;
                var hotSaleList = document.getElementById("hotSaleList");
                var str = " ";
                for (var i = 0; i < list.length; i++) {
                    str += '<li class="bs-item item">' +
                        '<a href="#">' +
                        '<img src="' + list[i].good_img + '" alt="" class="item-img">' +
                        '<p class="title">' + list[i].name + '</p>' +
                        '<div class="line-2 clearfix">' +
                        '<span class="comment">评论<em>' + list[i].commentNum + '</em></span>' +
                        '<span class="collect">收藏<em>' + list[i].collectNum + '</em></span>' +
                        '</div>' +
                        '<div class="line-3">' +
                        '<span class="strong">' + list[i].new_price + '</span>' +
                        '<span class="price-through">' + list[i].origin_price + '</span>' +
                        '<span class="sell">' + list[i].sellNum + '</span>' +
                        '</div>' +
                        '</a>' +
                        '</li>';
                }
                hotSaleList.innerHTML = str;
            }
        }, true);
    }

    //获取推荐喜欢列表
    function guessLikeApi() {
        ajax("get", "/JS/guesslike.json", function(res) {
            // console.log(res);
            if (res.code == 0) {
                var list = res.data;
                var saleList = document.getElementById("saleList");
                var str = " ";
                for (var i = 0; i < list.length; i++) {
                    str += `<li class="like-item item">
                    <a target="blank" href="${list[i].href}">
                        <img src="${list[i].good_img}" alt="" class="item-img">
                    </a>
                    <p class="title">${list[i].name}</p>
                    <div class="line-3">
                        <span class="strong">${list[i].new_price}</span>
                        <span class="sell">${list[i].sellNum}</span>
                    </div>
                    <a target="blank" href="${list[i].link}" class="item-more">发现更多相似宝贝</a>
                </li>`;
                }
                saleList.innerHTML = str;
            }
        }, true);
    }

    // 获取加载更多列表
    document.getElementById("loadMore").onclick = function() {
        var liNode = document.createElement("li");
        liNode.setAttribute("class", "like-item item");
        var liContent = `<a target="blank" href="https://search.jd.com/Search?keyword=%E5%8D%8E%E7%A1%952080ti&enc=utf-8&wq=%E5%8D%8E%E7%A1%952080ti&pvid=25d53fb4a0cc4a449954bdc511c5831b">
        <img src="/img/2080ti华硕.jpg" alt="显卡" class="item-img">
    </a>
    <p class="title">华硕2080Ti</p>
    <div class="line-3">
        <span class="strong">11100</span>
        <span class="sell">月销5000笔</span>
    </div>
    <a target="blank" href="https://search.jd.com/Search?keyword=2080ti&enc=utf-8&wq=2080ti&pvid=00b72ae3eb3a4e57bf545fa6e3c3453e" class="item-more">发现更多相似宝贝</a>`;
        liNode.innerHTML = liContent;
        document.getElementById("guessLike").appendChild(liNode);
    }
}

// 悬浮菜单
window.onscroll = function() {
    scrollShowBtn();
    var winPos = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动距离
    var hotSale = document.getElementById("hotsale");
    var hotHeight = hotSale.offsetTop + hotSale.offsetHeight;

    if (winPos < hotSale.offsetTop) {
        addOn(0);
    } else if (winPos >= hotSale.offsetTop && winPos < hotHeight) {
        addOn(1)
    } else {
        addOn(2);
    }
}

// 添加激活激活状态
function addOn(index) {
    var tool = document.getElementsByClassName("tool")[0];
    var toolItem = tool.getElementsByTagName("a");
    for (var i = 0; i < toolItem.length; i++) {
        toolItem[i].classList.remove("on");
    }
    toolItem[index].classList.add("on");
}

//滚动一定距离显示返回顶部的按钮
function scrollShowBtn() {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if (top > 300) {
        document.getElementById("goTop").style.display = "block";
    } else {
        document.getElementById("goTop").style.display = "none";
    }
}

//返回顶部
function goTop() {
    var topTimer = setInterval(function() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var Speed = Math.floor(-scrollTop / 8);
        if (scrollTop == 0) {
            clearInterval(topTimer);
        }
        document.documentElement.scrollTop = document.body.scrollTop = scrollTop + Speed;
    }, 30);

}